<template>
  <d2-container>
    <div class="muse_filter_box">
      <el-form ref="filtersForm" :model="form.date">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item>
              <el-date-picker
                style="width: 100%"
                v-model="form.date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="uid" v-model="form.uid"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input placeholder="昵称" v-model="form.nickname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="filterSearch()">查询</el-button>
            <el-button type="primary" @click="reset()">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="muse_table_box">
      <div class="muse_control_box" style="text-align: left">
        <!-- <span class="sum_up_label" style="margin-right: 10px"
          >总数:{{ totalNewUser }}
        </span> -->
        <span class="sum_up_label" style="margin-right: 10px"
          >未读: {{ notClickedCount }}</span
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="微博账户">
          <template slot-scope="scope">
            <div v-if="scope.row.isClicked != 1" style="color: red">
              {{ scope.row.accountName }}
            </div>
            <div v-else style="color: #c0c0c0">{{ scope.row.accountName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="微博昵称">
          <template slot-scope="scope">
            <div v-if="scope.row.isClicked != 1" style="color: red">
              {{ scope.row.nickname }}
            </div>
            <div v-else style="color: #c0c0c0">{{ scope.row.nickname }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="uid" label="UID">
          <template slot-scope="scope">
            <div v-if="scope.row.isClicked != 1" style="color: red">
              {{ scope.row.uid }}
            </div>
            <div v-else style="color: #c0c0c0">{{ scope.row.uid }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="dateStr" label="时间">
          <template slot-scope="scope">
            <div v-if="scope.row.isClicked != 1" style="color: red">
              {{ scope.row.dateStr }}
            </div>
            <div v-else style="color: #c0c0c0">{{ scope.row.dateStr }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="firstClickUser" label="首次查看">
          <template slot-scope="scope">
            <div v-if="scope.row.isClicked != 1" style="color: red">未查看</div>
            <div v-else style="color: #c0c0c0">
              {{
                scope.row.firstClickUser.length == 0
                  ? "未查看"
                  : scope.row.firstClickUser[0].staff.account
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="editRow(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="muse_pagination"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.page"
        :page-sizes="paging.pageSizeAry"
        :page-size="paging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
      >
      </el-pagination>
    </div>
    <div class="muse_table_box">
      <el-row
        :span="12"
        style="
          background-color: #f6fafe;
          height: 40px;
          margin-top: 10px;
          line-height: 40px;
          padding-left: 10px;
          position: relative;
        "
      >
        <div style="font-size: 18px; display: inline-block">
          昵称：{{ privateuser.nickname }} uid：{{ privateuser.uid }}
        </div>
      </el-row>
      <div
        v-for="(item, index) in detail"
        :key="item._id"
        :label="item.accountName"
        class="muse_control_box"
        style="text-align: left"
      >
        <span
          v-if="item.isFans == 1"
          class="sum_up_label"
          style="margin-right: 10px"
          >关注{{ item.accountName }}：是</span
        >
        <!-- <span
          v-if="item.isFans == 3"
          class="sum_up_label"
          style="margin-right: 10px"
          >关注{{ item.accountName }}：该账号行为异常</span
        > -->
        <span v-else class="sum_up_label" style="margin-right: 10px"
          >关注{{ item.accountName }}：否</span
        >
      </div>

      <el-row
        v-for="(item, index) in detail"
        v-if="item.privateList.length != 0"
        :key="item._id"
        :label="item.accountName"
        :span="6"
        style="margin-top: 10px"
        ><span
          style="
            width: 2px;
            height: 100%;
            background-color: rgb(52, 178, 211);
            color: rgb(52, 178, 211);
            margin-right: 3px;
          "
          >_</span
        >
        {{ item.accountName }} {{ item.dateStr }}
        <div v-for="(a, b) in item.privateList" style="background-color: white">
          <div v-if="a.date != ''" style="text-align: center; font-size: 25px">
            {{ a.date }}
          </div>
          <el-tag
            v-if="a.sendUser == 'me'"
            type="success"
            style="
              width: 100%;
              height: 100%;
              text-align: right;
              margin: 0px;
              font-size: 20px;
              white-space: normal;
            "
            >{{ a.text }}</el-tag
          >
          <el-tag
            v-if="a.sendUser == 'other' && a.text != ''"
            type="info"
            style="
              width: 100%;
              height: 100%;
              text-align: left;
              margin: 0px;
              font-size: 20px;
              white-space: normal;
            "
            >{{ a.text }}</el-tag
          >
          <el-image
            v-if="a.image != '' && a.image != undefined"
            style="width: 100px; height: 100px"
            :src="a.image"
            :preview-src-list="imgList"
          >
          </el-image>
        </div>
      </el-row>

      <!-- <el-row v-if="courseOrder.bonus.length == 0" style='background-color: white;height:150px;margin-top: 10px;border-width: 1px;border-color: #D4DFE5;border-style: solid;'>
            <div style="color:#CACBCC;width: 100%;text-align: center;line-height: 150px;height: 150px">
              <el-button type='primary' @click='showStaff = true' :disabled="!edit">添加提成人员</el-button>
            </div>
        </el-row> -->

      <!-- <el-tabs type="border-card">
            <el-tab-pane v-for="(item, index) in detail"  :key="item._id" :label="item.accountName"> -->
      <!-- <el-row :span="12" v-if="item.isFans == 1" style='background-color: #F6FAFE;height:40px;margin-top:10px;line-height: 40px;padding-left:10px;position: relative;'>
                <div style="font-size:18px;display: inline-block;">关注{{item.accountName}}：是</div>
              </el-row>
              <el-row :span="12" v-else style='background-color: #F6FAFE;height:40px;margin-top:10px;line-height: 40px;padding-left:10px;position: relative;'>
                <div style="font-size:18px;display: inline-block;">关注{{item.accountName}}：否</div>
              </el-row> -->
      <!-- <div v-for="(a,b) in item.privateList">
                  <el-tag v-if="a.sendUser=='me'" type="success" style="width:100%;text-align:right;margin:5px">{{a.text}}</el-tag>
                  <el-tag v-if="a.sendUser=='other'" type="info" style="width:100%;text-align:left;margin:5px">{{a.text}}</el-tag>
                </div>
            </el-tab-pane>
          </el-tabs> -->
    </div>
  </d2-container>
</template>

<script>
import tableMixin from "../mixins/tableMixin";
import { getIndexDetail, getNewChatDetail, getOneChat } from "@/api/admin";
import formatTime from "@/libs/util.formatTime";
import excel from "@/libs/util.excel.js";
export default {
  name: "index",
  mixins: [tableMixin],
  data() {
    return {
      show: true,
      form: {
        date:"",
        uid:"",
        nickname:""
      },
      totalNewUser: 0,
      notClickedCount: 0,
      privateuser: {},
      detail: [],
      accounts: [],
      imgList: [],
      tableData: [],
    };
  },
  created() {
    this.getTableData();
    // this.sockets.subscribe("newPrivate", (res) => {
    //   // console.log(res)
    //   this.notClickedCount = res.count;
    //   this.getTableData();
    // });
  },
  mounted() {
    this.draw_line();
    this.draw_bar();
  },
  methods: {
    async getTableData(value, type) {
      let params = {
        page:
          type === "page"
            ? value
              ? value
              : this.paging.page
            : this.paging.page,
        pageSize:
          type === "pageSize"
            ? value
              ? value
              : this.paging.pageSize
            : this.paging.pageSize,
      };
      params = Object.assign({}, params, this.form);
      const {
        code,
        data: { total, currentPage, pageSize, notClickedCount, data },
      } = await getNewChatDetail(params);
      data.forEach((e) => {
        e.dateStr = formatTime.formatDate(e.lastShowDate);
      });
      this.paging.total = total;
      this.paging.pageSize = pageSize;
      this.paging.page = currentPage;
      this.totalNewUser = total;
      this.notClickedCount = notClickedCount;
      this.tableData = data;
      this.show = true;
    },
    async getTableData2() {
      const {
        code,
        data: { privateuser, detail, accounts },
      } = await getOneChat({ id: this.userid });
      // console.log('1',privateuser,'2', detail,'3', accounts)
      this.privateuser = privateuser;
      this.detail = detail;
      this.accounts = accounts;
      this.imgList = [];
      detail.forEach((e) => {
        let dateStr = "";
        // "2021-03-26T11:53:26.893Z"
        // if(e.privateList[0]!= undefined){
        //   let tempDate = e.privateList[0].date
        //     if (tempDate.indexOf("-")==4){
        //       dateStr = tempDate
        //     }else if(tempDate.indexOf("-")==2){
        //       let year = e.addTime.substring(0,4)
        //       dateStr = year + "-" + tempDate.substring(0,5)
        //     }else if(tempDate.indexOf("昨天")!=-1){
        //       dateStr = e.addTime.substring(0,10)
        //     }else{
        //       dateStr = e.addTime.substring(0,10)
        //     }
        // }
        e.privateList.forEach((i) => {
          if (i.image != "") {
            this.imgList.push(i.image);
          }
          // let lastdate = ""
          //   if(e.privateList[0]!= undefined){
          //     let tempDate = e.privateList[0].date
          //       if (tempDate.indexOf("-")==4){
          //         lastdate = tempDate
          //       }else if(tempDate.indexOf("-")==2){
          //         let year = e.addTime.substring(0,4)
          //         lastdate = year + "-" + tempDate.substring(0,5)
          //       }else if(tempDate.indexOf("昨天")!=-1){
          //         lastdate = e.addTime.substring(0,10)
          //       }else{
          //         lastdate = e.addTime.substring(0,10)
          //       }
          //   }
          // if(i.date != ""){
          //     let tempDate = i.date
          //       if (tempDate.indexOf("-")==4){
          //         i.date = tempDate
          //         lastdate = tempDate
          //       }else if(tempDate.indexOf("-")==2){
          //         let year = e.addTime.substring(0,4)
          //         i.date = year + "-" + tempDate.substring(0,5)
          //         lastdate = year + "-" + tempDate.substring(0,5)
          //       }else if(tempDate.indexOf("昨天")!=-1){
          //         i.date = e.addTime.substring(0,10)
          //         lastdate = e.addTime.substring(0,10)
          //       }else{
          //         i.date = e.addTime.substring(0,10)
          //         lastdate = e.addTime.substring(0,10)
          //       }
          //   }else{
          //     i.date = lastdate
          //   }
        });
        // e.dateStr=dateStr
      });
    },
    // async getTableData(value, type) {
    //   let params = {
    //     page:
    //       type === "page"
    //         ? value
    //           ? value
    //           : this.paging.page
    //         : this.paging.page,
    //     pageSize:
    //       type === "pageSize"
    //         ? value
    //           ? value
    //           : this.paging.pageSize
    //         : this.paging.pageSize,
    //   };
    //   params = Object.assign({}, params, this.form);
    //   const {
    //     code,
    //     data: { total, currentPage, pageSize, notClickedCount, data },
    //   } = await getIndexDetail(params);
    //   this.paging.total = total;
    //   this.paging.pageSize = pageSize;
    //   this.paging.page = currentPage;
    //   this.totalNewUser = total;
    //   this.notClickedCount = notClickedCount;
    //   this.tableData = data;
    // },
    filterSearch() {
      this.getTableData();
    },
    reset(){
      this.form.date = ""
      this.form.uid = ""
      this.form.nickname = ""
      this.getTableData();
    },
    editRow(row) {
      // this.show = false
      // this.$router.push({ name: "privateuserdetail", query: { id: row._id } });
      this.userid = row._id;
      this.getTableData();
      this.getTableData2();
      this.getTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
